<template>
  <div>
    <span v-html="ceshi" v-if="showindex==0?true:false" class='ql-editor content announce-detail'></span>
    <!-- 搜索 -->
    <div class="search">
      <label style="color:#666;font-size:12px">角色：</label>
      <el-select size="mini" v-model="roleId" placeholder="请选择角色" clearable style="margin-right:10px">
        <el-option v-for="item in roomTypeList" :key="item.roomTypeId" :label="item.roomTypeName" :value="item.roomTypeId">
        </el-option>
      </el-select>
      <label style="color:#666;font-size:12px">客房状态：</label>
      <el-select size="mini" v-model="StateId" placeholder="请选择角色" clearable style="margin-right:10px">
        <el-option v-for="item in roomStateList" :key="item.roomStateId" :label="item.roomStateName" :value="item.roomStateId">
        </el-option>
      </el-select>
      <el-button type="primary" size="mini" @click="addClick">添加</el-button>
      <el-button type="info" size="mini" @click="searchClick">查询</el-button>
      <el-button type="success" size="mini" @click="excelClick">导出Excel</el-button>
    </div>
    <!-- 表格 -->
    <el-table class="table" :data="tableData1.slice((currentPage - 1) * pageSize, currentPage * pageSize)" size="mini">
      <!-- <el-table-column label="房间号" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.roomId }}</span>
        </template>
      </el-table-column> -->
        <el-table-column label="价格" width="180" prop="roomId"></el-table-column>
     
      <!-- </el-table-column> -->
      <el-table-column label="房间类型" width="180">
        <template slot-scope="scope">
          {{ scope.row.roomType.roomTypeName }}
        </template>
      </el-table-column>
      <el-table-column label="床位数" width="180">
        <template slot-scope="scope">
          {{ scope.row.roomType.bedNum }}
        </template>
      </el-table-column>
      <el-table-column label="价格" width="180">
        <template slot-scope="scope">
          {{ scope.row.roomType.roomTypePrice }}
        </template>
      </el-table-column>
      <el-table-column label="房间描述" width="180">
        <template slot-scope="scope">
          <span v-html="scope.row.roomType.typeDescription"></span>
        </template>
      </el-table-column>
      <el-table-column label="房间状态" width="180">
        <template slot-scope="scope">
          <el-tag size="mini" :type="
              scope.row.roomStateId === 1
                ? 'success'
                : scope.row.roomStateId === 2
                ? 'danger'
                : 'warning'
            " disable-transitions>{{ scope.row.roomState.roomStateName }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="240">
        <template slot-scope="scope">
          <el-button size="mini" type="warning" @click="handlexg(scope.$index, scope.row)">插入</el-button>
          <el-button size="mini" type="warning" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>

      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="flex j-c" style="margin-top:5px">
      <el-pagination class="pagination" align="center" background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[1, 5, 10, 20]" :page-size="pageSize" layout="total, prev, pager, next" :total=" tableData1.length">
      </el-pagination>
    </div>
    <!-- 抽屉 -->

    <el-drawer :append-to-body="true" :title="isAdd ? '添加客房' : '修改客房'" :visible.sync="drawer" direction="rtl" :before-close="drawerClose" size="45%">
      <div style="padding: 0 10px">
        <el-form size="mini" :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm">
          <el-form-item label="客房编号" prop="roomId">
            <el-input v-model="ruleForm.roomId" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="客房类型" prop="roomTypeId">
            <el-select size="mini" v-model="ruleForm.roomTypeId" placeholder="请选择客房类型" clearable style="margin-right: 10px">
              <el-option v-for="item in roomTypeList" :key="item.roomTypeId" :label="item.roomTypeName" :value="item.roomTypeId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="客房状态" prop="roomStateId">
            <el-select size="mini" v-model="ruleForm.roomStateId" placeholder="请选择客房状态" clearable style="margin-right: 10px">
              <el-option v-for="item in roomStateList" :key="item.roomStateId" :label="item.roomStateName" :value="item.roomStateId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="描述" prop="description">
            <editor v-model='ruleForm.description'></editor>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">{{
              isAdd ? "添加" : "修改"
            }}</el-button>
            <el-button @click="resetForm('ruleForm')">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import { xlsx } from "../../../untils/xlsx.js";

import editor from '../../../components/editor.vue'

// 导入 查看管理员头像根路径 和 管理员头像上传路径
export default {
  // 数据
  components: { editor },
  computed: {
    sum1() {
      return this.newsum - this.sum
    }
  },
  data() {

    // 验证房间号
    var validateRoomId = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入客房编号"));
      } else {
        callback();
      }
    };
    // 验证状态
    var validateRoomStateId = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请选择客房状态"));
      } else {
        callback();
      }
    };
    // 验证类型
    var validateRoomTypeId = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请选择客房类型"));
      } else {
        callback();
      }
    };

    return {
      ceshi: '不能为空',
      sum: 15,
      newsum: 14,
      showindex: 1,
      // 表格数据
      tableData: [
        {
          "roomId": "2001",
          "description": "无",
          "roomStateId": 1,
          "roomTypeId": 2,
          "roomState": {
            "roomStateId": 1,
            "roomStateName": "空闲"
          },
          "roomType": {
            "roomTypeId": 2,
            "roomTypeName": "单人间",
            "bedNum": 1,
            "typeDescription": "<p>111</p>",
            "roomTypePrice": 70
          }
        },
        {
          "roomId": "123",
          "description": "<p>123</p>",
          "roomStateId": 3,
          "roomTypeId": 5,
          "roomState": {
            "roomStateId": 3,
            "roomStateName": "维修"
          },
          "roomType": {
            "roomTypeId": 5,
            "roomTypeName": "标准套房",
            "bedNum": 2,
            "typeDescription": "无",
            "roomTypePrice": 380
          }
        },
        {
          "roomId": "2003",
          "description": "无",
          "roomStateId": 1,
          "roomTypeId": 2,
          "roomState": {
            "roomStateId": 1,
            "roomStateName": "空闲"
          },
          "roomType": {
            "roomTypeId": 2,
            "roomTypeName": "单人间",
            "bedNum": 1,
            "typeDescription": "<p>无</p>",
            "roomTypePrice": 70
          }
        },
        {
          "roomId": "1005",
          "description": "<p>21342314231</p>",
          "roomStateId": 1,
          "roomTypeId": 3,
          "roomState": {
            "roomStateId": 1,
            "roomStateName": "空闲"
          },
          "roomType": {
            "roomTypeId": 3,
            "roomTypeName": "大床房",
            "bedNum": 1,
            "typeDescription": "无",
            "roomTypePrice": 280
          }
        },
        {
          "roomId": "1233",
          "description": "<p>test</p>",
          "roomStateId": 1,
          "roomTypeId": 3,
          "roomState": {
            "roomStateId": 1,
            "roomStateName": "空闲"
          },
          "roomType": {
            "roomTypeId": 3,
            "roomTypeName": "大床房",
            "bedNum": 1,
            "typeDescription": "无",
            "roomTypePrice": 280
          }
        },
        {
          "roomId": "3001",
          "description": "无",
          "roomStateId": 1,
          "roomTypeId": 3,
          "roomState": {
            "roomStateId": 1,
            "roomStateName": "空闲"
          },
          "roomType": {
            "roomTypeId": 3,
            "roomTypeName": "大床房",
            "bedNum": 1,
            "typeDescription": "无",
            "roomTypePrice": 280
          }
        },
        {
          "roomId": "3002",
          "description": "无",
          "roomStateId": 1,
          "roomTypeId": 3,
          "roomState": {
            "roomStateId": 1,
            "roomStateName": "空闲"
          },
          "roomType": {
            "roomTypeId": 3,
            "roomTypeName": "大床房",
            "bedNum": 1,
            "typeDescription": "无",
            "roomTypePrice": 280
          }
        },
        {
          "roomId": "3003",
          "description": "无",
          "roomStateId": 1,
          "roomTypeId": 3,
          "roomState": {
            "roomStateId": 1,
            "roomStateName": "空闲"
          },
          "roomType": {
            "roomTypeId": 3,
            "roomTypeName": "大床房",
            "bedNum": 1,
            "typeDescription": "无",
            "roomTypePrice": 280
          }
        },
        {
          "roomId": "4001",
          "description": "无",
          "roomStateId": 1,
          "roomTypeId": 4,
          "roomState": {
            "roomStateId": 1,
            "roomStateName": "空闲"
          },
          "roomType": {
            "roomTypeId": 4,
            "roomTypeName": "三人间",
            "bedNum": 3,
            "typeDescription": "无",
            "roomTypePrice": 300
          }
        },
        {
          "roomId": "4002",
          "description": "无",
          "roomStateId": 1,
          "roomTypeId": 4,
          "roomState": {
            "roomStateId": 1,
            "roomStateName": "空闲"
          },
          "roomType": {
            "roomTypeId": 4,
            "roomTypeName": "三人间",
            "bedNum": 3,
            "typeDescription": "无",
            "roomTypePrice": 300
          }
        },
        {
          "roomId": "4003",
          "description": "无",
          "roomStateId": 1,
          "roomTypeId": 4,
          "roomState": {
            "roomStateId": 1,
            "roomStateName": "空闲"
          },
          "roomType": {
            "roomTypeId": 4,
            "roomTypeName": "三人间",
            "bedNum": 3,
            "typeDescription": "无",
            "roomTypePrice": 300
          }
        },
        {
          "roomId": "5001",
          "description": "无",
          "roomStateId": 1,
          "roomTypeId": 5,
          "roomState": {
            "roomStateId": 1,
            "roomStateName": "空闲"
          },
          "roomType": {
            "roomTypeId": 5,
            "roomTypeName": "标准套房",
            "bedNum": 2,
            "typeDescription": "无",
            "roomTypePrice": 380
          }
        },
        {
          "roomId": "5002",
          "description": "无",
          "roomStateId": 1,
          "roomTypeId": 5,
          "roomState": {
            "roomStateId": 1,
            "roomStateName": "空闲"
          },
          "roomType": {
            "roomTypeId": 5,
            "roomTypeName": "标准套房",
            "bedNum": 2,
            "typeDescription": "无",
            "roomTypePrice": 380
          }
        },
        {
          "roomId": "5003",
          "description": "无",
          "roomStateId": 1,
          "roomTypeId": 5,
          "roomState": {
            "roomStateId": 1,
            "roomStateName": "空闲"
          },
          "roomType": {
            "roomTypeId": 5,
            "roomTypeName": "标准套房",
            "bedNum": 2,
            "typeDescription": "无",
            "roomTypePrice": 380
          }
        },
        {
          "roomId": "6001",
          "description": "无",
          "roomStateId": 1,
          "roomTypeId": 6,
          "roomState": {
            "roomStateId": 1,
            "roomStateName": "空闲"
          },
          "roomType": {
            "roomTypeId": 6,
            "roomTypeName": "豪华套房",
            "bedNum": 2,
            "typeDescription": "无",
            "roomTypePrice": 580
          }
        },
        {
          "roomId": "6002",
          "description": "无",
          "roomStateId": 1,
          "roomTypeId": 6,
          "roomState": {
            "roomStateId": 1,
            "roomStateName": "空闲"
          },
          "roomType": {
            "roomTypeId": 6,
            "roomTypeName": "豪华套房",
            "bedNum": 2,
            "typeDescription": "无",
            "roomTypePrice": 580
          }
        },
        {
          "roomId": "6003",
          "description": "无",
          "roomStateId": 1,
          "roomTypeId": 6,
          "roomState": {
            "roomStateId": 1,
            "roomStateName": "空闲"
          },
          "roomType": {
            "roomTypeId": 6,
            "roomTypeName": "豪华套房",
            "bedNum": 2,
            "typeDescription": "无",
            "roomTypePrice": 580
          }
        },
        {
          "roomId": "7001",
          "description": "无",
          "roomStateId": 1,
          "roomTypeId": 7,
          "roomState": {
            "roomStateId": 1,
            "roomStateName": "空闲"
          },
          "roomType": {
            "roomTypeId": 7,
            "roomTypeName": "商务套房",
            "bedNum": 3,
            "typeDescription": "无",
            "roomTypePrice": 880
          }
        },
        {
          "roomId": "7002",
          "description": "无",
          "roomStateId": 1,
          "roomTypeId": 7,
          "roomState": {
            "roomStateId": 1,
            "roomStateName": "空闲"
          },
          "roomType": {
            "roomTypeId": 7,
            "roomTypeName": "商务套房",
            "bedNum": 3,
            "typeDescription": "无",
            "roomTypePrice": 880
          }
        },
        {
          "roomId": "7003",
          "description": "无",
          "roomStateId": 1,
          "roomTypeId": 7,
          "roomState": {
            "roomStateId": 1,
            "roomStateName": "空闲"
          },
          "roomType": {
            "roomTypeId": 7,
            "roomTypeName": "商务套房",
            "bedNum": 3,
            "typeDescription": "无",
            "roomTypePrice": 880
          }
        }
      ],
      currentPage: 1, // 当前页码
      pageSize: 10,// 每页的数据条数
      //展示数组
      tableData1: [],
      // 客房类型编号（用于根据条件查询账号信息）
      roleId: '',
      StateId: "",
      //客房类型列表
      roomTypeList: [
        {
          "roomTypeId": 1,
          "roomTypeName": "标准间",
          "bedNum": 2,
          "typeDescription": "<p>1111</p>",
          "roomTypePrice": 120
        },
        {
          "roomTypeId": 2,
          "roomTypeName": "单人间",
          "bedNum": 1,
          "typeDescription": "<p>dsdas  </p>",
          "roomTypePrice": 70
        },
        {
          "roomTypeId": 3,
          "roomTypeName": "大床房",
          "bedNum": 1,
          "typeDescription": "无",
          "roomTypePrice": 280
        },
        {
          "roomTypeId": 4,
          "roomTypeName": "三人间",
          "bedNum": 3,
          "typeDescription": "无",
          "roomTypePrice": 300
        },
        {
          "roomTypeId": 5,
          "roomTypeName": "标准套房",
          "bedNum": 2,
          "typeDescription": "无",
          "roomTypePrice": 380
        },
        {
          "roomTypeId": 6,
          "roomTypeName": "豪华套房",
          "bedNum": 2,
          "typeDescription": "无",
          "roomTypePrice": 580
        },
        {
          "roomTypeId": 7,
          "roomTypeName": "商务套房",
          "bedNum": 3,
          "typeDescription": "无",
          "roomTypePrice": 880
        },
        {
          "roomTypeId": 8,
          "roomTypeName": "行政套房",
          "bedNum": 3,
          "typeDescription": "无",
          "roomTypePrice": 1000
        },
        {
          "roomTypeId": 9,
          "roomTypeName": "总统套房",
          "bedNum": 4,
          "typeDescription": "无",
          "roomTypePrice": 2000
        }
      ],
      //客房状态列表
      roomStateList: [
        {
          "roomStateId": 1,
          "roomStateName": "空闲"
        },
        {
          "roomStateId": 2,
          "roomStateName": "入住"
        },
        {
          "roomStateId": 3,
          "roomStateName": "维修"
        }
      ],

      // 角色列表
      roleList: [
        {
          "roleId": 1,
          "roleName": "超级管理员"
        },
        {
          "roleId": 45,
          "roleName": "普通管理员"
        },
        {
          "roleId": 86,
          "roleName": "测试"
        },
        {
          "roleId": 88,
          "roleName": "法外狂徒张三"
        }
      ],
      // 当前页码
      pageIndex: 1,

      // // 管理员头像根路径
      // BASE_URL_AdminImg,
      // // 管理员头像上传路径
      // Upload_AdminImg_URL,
      // 是否打开抽屉
      drawer: false,
      // 抽屉是否做添加
      isAdd: true,
      // 表单数据
      ruleForm: {
        //房间号
        roomId: "",
        //状态编号
        roomStateId: "",
        //类型编号
        roomTypeId: "",
        //房间描述
        description: "",
      },
      // 新的表单
      newruleForm: {

      },
      // 表单的验证数据
      rules: {
        // 验证房间号
        roomId: [{ validator: validateRoomId, trigger: "blur" }],
        // 验证状态
        roomStateId: [{ validator: validateRoomStateId, trigger: "change" }],
        // 验证类型价格
        roomTypeId: [{ validator: validateRoomTypeId, trigger: "change" }],
      }
    }
  },
  created() {
    this.tableData1 = this.tableData
  },
  mounted() {

    // table[].name
    //  this.getRoleList()
    // //调用获取表格数据的方法
    // this.getTableData()
    // //调用获取角色列表的方法
    // this.getRoleList()
    // this.tableData1=this.tableData
    // console.log(this.tableData1);
  },
  // 方法
  methods: {
    change(val) {
      //  console.log('val: ', val)
      this.ceshi = val
    },
    async getRoleList() {
      let res = await this.$http.get('/Role/List')
      // console.log(res);
    },
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    //导出excel的方法
    excelClick() {
      // 组织导出的数据
      let json = this.tableData1.map((r) => {
        return {
          roomId: r.roomId,
          roomType: r.roomType.roomTypeName,
          bedNum: r.roomType.bedNum,
          price: r.roomType.roomTypePrice,
          roomState: r.roomState.roomStateName,
        };
      });
      // 组织表头对象
      let fields = {
        roomId: "客房编号",
        roomType: "客房类型",
        bedNum: "床位数",
        price: "价格",
        roomState: "客房状态",
      };
      // 定义文件名称
      let filename = "员工信息表";
      // 将指定的数据导出到一个excel文件中
      // xlsx();
      xlsx(json, fields, filename)
    },
    //搜索方法
    searchClick() {
      if (this.roleId && this.StateId == '') {
        this.tableData1 = this.tableData.filter(r => r.roomType.roomTypeId == this.roleId)
      } else if (this.StateId && this.roleId == '') {
        this.tableData1 = this.tableData.filter(r => r.roomState.roomStateId == this.StateId)
      } else if (this.roleId && this.StateId) {
        this.tableData1 = this.tableData.filter(r => r.roomType.roomTypeId == this.roleId && r.roomState.roomStateId == this.StateId)
      } else {
        this.tableData1 = this.tableData
      }
    },
    // 添加按钮点击方法
    addClick() {
      this.drawer = true
      this.ruleForm = {
        //房间号
        roomId: "",
        //状态编号
        roomStateId: "",
        //类型编号
        roomTypeId: "",
        //房间描述
        description: "",
      }
    },
    // 关闭抽屉的方法
    drawerClose(done) {
      // 清空表单数据
      /* this.ruleForm = {
          roleName: "",
      }; */
      this.resetForm('ruleForm')

      // 表单恢复成添加状态
      this.isAdd = true
      // 关闭抽屉
      done()
    },
    // 表单提交方法
    submitForm(formName) {
      this.$refs[formName].validate(async valid => {
        // 判断表单数据是否验证成功
        if (valid) {
          //判断是否是执行添加
          if (this.isAdd) {
            if (this.tableData.some(r => r.roomId == this.ruleForm.roomId)) {
              this.$message.error('不允许重复添加');
            } else {
              let roomtype = this.roomTypeList.filter(r => r.roomTypeId == this.ruleForm.roomTypeId)
              let roomstate = this.roomStateList.filter(r => r.roomStateId == this.ruleForm.roomStateId)
              let stu = {
                roomId: this.ruleForm.roomId,
                description: this.ruleForm.description,
                roomStateId: this.ruleForm.roomStateId,
                roomTypeId: this.ruleForm.roomTypeId,
                roomState: { ...roomstate[0] },
                roomType: { ...roomtype[0] }
              }
              this.tableData.unshift(stu)
            }

          } else {
            this.newruleForm.roomId = this.ruleForm.roomId
            let roomtype = this.roomTypeList.filter(r => r.roomTypeId == this.ruleForm.roomTypeId)
            this.newruleForm.roomType = { ...roomtype[0] }
            let roomstate = this.roomStateList.filter(r => r.roomStateId == this.ruleForm.roomStateId)

            this.newruleForm.roomState = { ...roomstate[0] }
            console.log(this.ruleForm.description);
            // console.log(this.ruleForm.description);
            // this.newruleForm.description = this.ruleForm.description
            // this.drawer = false
          }
        } else {
          return false
        }
      })
    },
    // 表单重置方法
    resetForm(formName) {
      //重置表单
      this.$refs[formName].resetFields()
      //清空表单数据
      this.ruleForm = {
        //房间号
        roomId: "",
        //状态编号
        roomStateId: "",
        //类型编号
        roomTypeId: "",
        //房间描述
        description: ""
      }
    },
    async handlexg(index, row) {
   
      console.log(index, row);
    },
    // 编辑表格数据
    async handleEdit(index, row) {
      this.newruleForm = row
      // console.log(row);
      let rule = this.tableData.filter(r => r.roomId == row.roomId)
      this.ruleForm = { ...rule[0] }
      // 表示修改
      if (row.roomId == "2001") {
        this.$message.error('初始用户不给修改');
      } else {
        this.isAdd = false;
        //打开抽屉
        this.drawer = true;
      }
    },
    // 删除表格数据
    async handleDelete(index, row) {
      this.$confirm('是否确定删除', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (row.roomId == "2001") {
          this.$message.error('初始用户不给删除');
        } else {
          this.tableData.splice(index, 1)
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  }
}
</script>
<style scoped lang="scss">
.search {
  padding-left: 10px;
}
// 上传头像样式
.avatar-uploader {
  width: 178px;
  height: 178px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
